<template>
  <div class="in-storage-view">
    <!-- 顶部筛选表单 -->
    <el-card class="filter-card">
      <div class="filter-header">
        <span class="filter-title">数据筛选</span>
        <el-button class="advanced-btn" type="text" @click="showAdvanced = true"
          >高级搜索</el-button
        >
      </div>
      <el-form :inline="true" :model="query" class="filter-form">
        <el-form-item label="入库单号：">
          <el-input
            v-model="query.warehouse_Code"
            placeholder="请输入入库单号"
            class="filter-input"
          />
        </el-form-item>
        <el-form-item label="单据类型：">
          <el-select
            v-model="query.warehousing_Type"
            placeholder="请选择"
            class="custom-select filter-input"
          >
            <el-option label="采购收货入库" value="采购收货入库" />
            <el-option label="销售退货入库" value="销售退货入库" />
            <el-option label="生产产品入库" value="生产产品入库" />
            <el-option label="领用退还入库" value="领用退还入库" />
          </el-select>
        </el-form-item>
        <el-form-item label="入库单状态：">
          <el-select
            v-model="query.state"
            placeholder="请选择"
            class="custom-select filter-input"
          >
            <el-option label="全部" value="" />
            <el-option label="待审核" value="待审核" />
            <el-option label="审核成功" value="审核成功" />
            <el-option label="审核失败" value="审核失败" />
          </el-select>
        </el-form-item>
        <el-form-item class="filter-actions">
          <el-button size="small" type="primary" @click="search"
            >查询</el-button
          >
          <el-button size="small" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据表格 -->
    <el-card class="table-card">
      <div class="table-header">
        <span class="table-title">数据列表</span>
        <div class="table-actions">
          <el-button size="small" type="success" @click="onAdd">新增</el-button>
          <el-button size="small" type="danger" @click="onBatchDelete"
            >删除</el-button
          >
          <el-button size="small" @click="search" type="primary"
            >刷新</el-button
          >
          <el-button size="small" type="warning" @click="paload"
            >导出</el-button
          >
        </div>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="warehouse_Code" label="入库单号" width="120" />
        <el-table-column prop="product_Name" label="产品名称" width="120" />
        <el-table-column prop="product_Number" label="产品编码" width="100" />
        <el-table-column prop="batch" label="批次" width="120" />
        <el-table-column prop="specifications" label="规格" width="120" />
        <el-table-column
          prop="warehouse_InOrOutCount"
          label="数量"
          width="80"
        />
        <el-table-column prop="storage_Name" label="库位" width="60" />
        <el-table-column prop="warehousing_Type" label="入库类型" width="120" />
        <el-table-column prop="supplierName" label="供货商" width="120" />
        <el-table-column prop="creatorName" label="制单人" width="100" />
        <el-table-column prop="state" label="状态" width="100" />
        <el-table-column prop="reviewer" label="审核人" width="100" />
        <el-table-column prop="reviewTime" label="审核时间" width="150">
          <template #default="scope">
            {{
              scope.row.reviewTime
                ? moment(scope.row.reviewTime).format("YYYY-MM-DD HH:mm:ss")
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300px">
          <template #default="scope">
            <el-button
              size="small"
              style="margin-right: 5px"
              type="primary"
              @click="onView(scope.row.batch)"
              >查看</el-button
            >
            <el-button
            v-if="scope.row.state == '待审核'"
              size="small"
              style="margin-right: 5px"
              type="info"
              @click="onEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
            v-if="scope.row.state == '待审核'"
              size="small"
              style="margin-right: 5px"
              type="danger"
              @click="onDelete(scope.row.id)"
              >删除</el-button
            >
            <el-button
              v-if="scope.row.reviewer === userName && scope.row.state == '待审核'"
              size="small"
              style="margin-right: 5px"
              type="warning"
              @click="onReview(scope.row)"
              >审核</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <table>
      <tr>
        <td>
          <el-pagination
            v-model:current-page="pageQuery.pageindex"
            v-model:page-size="pageQuery.pagesize"
            :page-sizes="[15, 20, 30]"
            :size="size"
            background="true"
            layout="slot, sizes"
            :total="pageQuery.totalCount"
          >
            共{{ pageQuery.totalCount }}条 每页显示{{ pageQuery.pagesize }}条
            当前第{{ pageQuery.pageindex }}页/共{{ pageQuery.totalPage }}页
          </el-pagination>
        </td>
        <td>
          <el-pagination
            v-model:current-page="pageQuery.pageindex"
            v-model:page-size="pageQuery.pagesize"
            :page-sizes="[15, 20, 30]"
            :size="size"
            background="true"
            layout="slot, prev, pager, next"
            :total="pageQuery.totalCount"
            prev-text="上一页"
            next-text="下一页"
          >
            <el-button
              :disabled="pageQuery.pageindex == 1"
              @click="pageQuery.pageindex = 1"
              >首页</el-button
            >
          </el-pagination>
        </td>
        <td>
          <el-pagination
            v-model:current-page="pageQuery.pageindex"
            v-model:page-size="pageQuery.pagesize"
            :page-sizes="[15, 20, 30]"
            :size="size"
            background="true"
            layout="slot,jumper"
            :total="pageQuery.totalCount"
          >
            <el-button
              :disabled="pageQuery.pageindex == pageQuery.totalPage"
              @click="pageQuery.pageindex = pageQuery.totalPage"
              >尾页</el-button
            >
          </el-pagination>
        </td>
      </tr>
    </table>

    <!-- 高级搜索对话框 -->
    <el-dialog v-model="showAdvanced" title="高级搜索" width="600px">
      <el-form :model="query" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="入库单号：">
              <el-input
                v-model="query.warehouse_Code"
                placeholder="请输入/扫描单号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单据类型：">
              <el-select
                v-model="query.warehousing_Type"
                placeholder="请选择"
                class="custom-select"
              >
                <el-option label="采购收货入库" value="采购收货入库" />
                <el-option label="销售退货入库" value="销售退货入库" />
                <el-option label="生产产品入库" value="生产产品入库" />
                <el-option label="领用退还入库" value="领用退还入库" />
                <el-option label="调拨入库" value="调拨入库" />
                <el-option label="移动入库" value="移动入库" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商编码：">
              <el-input
                v-model="query.supplierCode"
                placeholder="请输入供应商编码"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入库单状态：">
              <el-select
                v-model="query.state"
                placeholder="请选择"
                class="custom-select"
              >
                <el-option label="全部" value="" />
                <el-option label="待审核" value="待审核" />
                <el-option label="审核成功" value="审核成功" />
                <el-option label="审核失败" value="审核失败" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商名称：">
              <el-input
                v-model="query.supplierName"
                placeholder="请输入供应商名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="起始时间：">
              <el-date-picker
                v-model="query.createTime"
                type="date"
                placeholder="起始时间"
                style="width: 100%"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button link style="color: #409eff" @click="onAdvancedReset"
          >清除条件</el-button
        >
        <el-button style="color: #409eff" @click="showAdvanced = false"
          >取消</el-button
        >
        <el-button type="primary" @click="search">确定</el-button>
      </template>
    </el-dialog>

    <!-- 查看弹窗 -->
    <el-dialog v-model="viewDialogVisible" title="入库单详情" width="800px">
      <!-- 上半部分：主表信息 -->
      <div class="detail-base-info">
        <el-row :gutter="24" style="margin-bottom: 32px">
          <el-col :span="8"
            ><span class="label">入库单号：</span
            >{{ viewBaseInfo.warehouse_Code }}</el-col
          >
          <el-col :span="8"
            ><span class="label">入库类型：</span
            >{{ viewBaseInfo.warehousing_Type }}</el-col
          >
          <el-col :span="8"
            ><span class="label">入库状态：</span
            >{{ viewBaseInfo.state }}</el-col
          >
          <el-col :span="8"
            ><span class="label">供应商编号：</span
            >{{ viewBaseInfo.supplierCode }}</el-col
          >
          <el-col :span="8"
            ><span class="label">供应商名称：</span
            >{{ viewBaseInfo.supplierName }}</el-col
          >
          <el-col :span="8"
            ><span class="label">联系人：</span
            >{{ viewBaseInfo.supplier_Contacts }}</el-col
          >
          <el-col :span="8"
            ><span class="label">供应商电话：</span
            >{{ viewBaseInfo.supplier_Phone }}</el-col
          >
          <el-col :span="8"
            ><span class="label">制单人：</span
            >{{ viewBaseInfo.creatorName }}</el-col
          >
          <el-col :span="8"
            ><span class="label">制单日期：</span
            >{{
              viewBaseInfo.createTime
                ? moment(viewBaseInfo.createTime).format("YYYY-MM-DD HH:mm:ss")
                : ""
            }}</el-col
          >
          <el-col :span="8"
            ><span class="label">备注：</span>{{ viewBaseInfo.notes }}</el-col
          >
          <el-col :span="8"
            ><span class="label">审核原因：</span
            >{{ viewBaseInfo.reason }}</el-col
          >
        </el-row>
      </div>
      <!-- 下半部分：明细表格 -->
      <el-table
        :data="viewDetailList"
        border
        style="width: 100%; margin-bottom: 8px"
      >
        <el-table-column prop="product_Number" label="产品编码" />
        <el-table-column prop="product_Name" label="产品名称" />
        <el-table-column prop="specifications" label="规格" />
        <el-table-column prop="batch" label="批次" />
        <el-table-column prop="price" label="单价" />
        <el-table-column prop="warehouse_InOrOutCount" label="入库数" />
        <el-table-column prop="total_Price" label="总价" />
        <el-table-column prop="storage_Name" label="库位" />
      </el-table>
      <template #footer>
        <el-button @click="viewDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 审核弹窗 -->
    <el-dialog v-model="reviewDialogVisible" title="审核" width="800px">
      <!-- 上半部分：主表信息 -->
      <div class="detail-base-info">
        <el-row :gutter="24" style="margin-bottom: 32px">
          <el-col :span="8"
            ><span class="label">入库单号：</span
            >{{ viewBaseInfo.warehouse_Code }}</el-col
          >
          <el-col :span="8"
            ><span class="label">入库类型：</span
            >{{ viewBaseInfo.warehousing_Type }}</el-col
          >
          <el-col :span="8"
            ><span class="label">入库状态：</span
            >{{ viewBaseInfo.state }}</el-col
          >
          <el-col :span="8"
            ><span class="label">供应商编号：</span
            >{{ viewBaseInfo.supplierCode }}</el-col
          >
          <el-col :span="8"
            ><span class="label">供应商名称：</span
            >{{ viewBaseInfo.supplierName }}</el-col
          >
          <el-col :span="8"
            ><span class="label">联系人：</span
            >{{ viewBaseInfo.supplier_Contacts }}</el-col
          >
          <el-col :span="8"
            ><span class="label">供应商电话：</span
            >{{ viewBaseInfo.supplier_Phone }}</el-col
          >
          <el-col :span="8"
            ><span class="label">制单人：</span
            >{{ viewBaseInfo.creatorName }}</el-col
          >
          <el-col :span="8"
            ><span class="label">制单日期：</span
            >{{
              viewBaseInfo.createTime
                ? moment(viewBaseInfo.createTime).format("YYYY-MM-DD HH:mm:ss")
                : ""
            }}</el-col
          >
          <el-col :span="8"
            ><span class="label">备注：</span>{{ viewBaseInfo.notes }}</el-col
          >
          <el-col :span="24">
            <div style="display: flex; align-items: flex-start">
              <span class="label" style="margin-top: 6px; min-width: 70px"
                >审核原因：</span
              >
              <el-input
                v-model="viewBaseInfo.reason"
                type="textarea"
                :rows="3"
                maxlength="300"
                show-word-limit
                placeholder="请输入审核原因"
                style="flex: 1"
              />
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 下半部分：明细表格 -->
      <el-table
        :data="viewDetailList"
        border
        style="width: 100%; margin-bottom: 8px"
      >
        <el-table-column prop="product_Number" label="产品编码" />
        <el-table-column prop="product_Name" label="产品名称" />
        <el-table-column prop="specifications" label="规格" />
        <el-table-column prop="batch" label="批次" />
        <el-table-column prop="price" label="单价" />
        <el-table-column prop="warehouse_InOrOutCount" label="入库数" />
        <el-table-column prop="total_Price" label="总价" />
        <el-table-column prop="storage_Name" label="库位" />
      </el-table>
      <template #footer>
        <el-button type="primary" @click="onReviewPass">审核通过</el-button>
        <el-button type="danger" @click="onReviewFail">审核不通过</el-button>
        <el-button @click="reviewDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
const route = useRoute();
const router = useRouter();
import type { ComponentSize } from "element-plus";
const size = ref<ComponentSize>("default");
import axios from "axios";
import moment from "moment";
import { ElMessage, ElMessageBox } from "element-plus";

import { statementRed } from "@/http/axiosHelper";
import { statementWrite } from "@/http/axiosHelper";


import { StorageRed, StorageWrite } from "@/http/axiosHelper";

const query = ref({
  warehouse_Code: "",
  warehousing_Type: "",
  state: "",
  supplierCode: "",
  supplierName: "",
  createTime: "",
});

function onAdvancedReset() {
  query.value = {
    warehouse_Code: "",
    warehousing_Type: "",
    state: "",
    supplierCode: "",
    supplierName: "",
    createTime: "",
  };
}

const showAdvanced = ref(false);

const pageQuery: any = reactive({
  pageindex: 1,
  pagesize: 15,
  totalCount: "",
  totalPage: "",
});

const tableData = ref([]);

onMounted(() => {
  search();
});
const search = () => {
  StorageRed({
    url: "/api/Warehouse_InOrOut/GetWarehouse_InOrOut",
    method: "get",
    params: {
      warehouse_Code: query.value.warehouse_Code,
      warehousing_Type: query.value.warehousing_Type,
      state: query.value.state,
      supplierCode: query.value.supplierCode,
      supplierName: query.value.supplierName,
      createTime: query.value.createTime,
      pageindex: pageQuery.pageindex,
      pagesize: pageQuery.pagesize,
      warehouseType: 1,
    },
  }).then((res: any) => {
    tableData.value = res.data.data;
    pageQuery.totalCount = res.data.totalCount;
    pageQuery.totalPage = res.data.totalPage;
  });
};

watch(pageQuery, () => {
  search();
});

//重置
function onReset() {
  query.value = {
    warehouse_Code: "",
    warehousing_Type: "",
    state: "",
    supplierCode: "",
    supplierName: "",
    createTime: "",
  };
  search();
}
//查看
function onView(batch: any) {
  viewDialogVisible.value = true;
  StorageRed({
    url: "/api/Warehouse_InOrOut/GetWarehouse_InOrOutDetail",
    method: "get",
    params: {
      batch: batch,
      warehouseType: 1,
    },
  }).then((res: any) => {
    // 假设返回的是数组
    viewDetailList.value = res.data.data || [];
    viewBaseInfo.value = res.data.data[0] || {};
  });
}

function onEdit(row: any) {
  router.push({
    path: "/Warehouse_InUpdateView",
    query: {
      batch: row.batch,
    },
  });
}

const multipleSelection = ref<any[]>([]);
//获取复选框选中数据
function handleSelectionChange(val: any[]) {
  multipleSelection.value = val;
}

//批量删除
function onBatchDelete() {
  if (multipleSelection.value.length === 0) {
    ElMessage.warning("请先选择要删除的数据！");
    return;
  }
  // 关键：用逗号拼接成字符串
  const ids = multipleSelection.value.map((item) => item.id).join(",");
  ElMessageBox.confirm("确定要删除选中的数据吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      StorageWrite({
        url: "/api/Warehouse_InOrOut/DeleteWarehouse_InOrOut",
        method: "delete",
        params: {
          ids: ids, // 这里是字符串
        },
      }).then((res: any) => {
        if (res.data.code == 200) {
          ElMessage.success(res.data.msg);
          search();
        } else {
          ElMessage.error(res.data.msg);
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
}
//删除单条数据
function onDelete(id: any) {
  ElMessageBox.confirm("确定要删除该条数据吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      StorageWrite({
        url: "/api/Warehouse_InOrOut/DeleteWarehouse_InOrOut",
        method: "delete",
        params: {
          ids: id,
        },
      }).then((res: any) => {
        if (res.data.code == 200) {
          ElMessage.success(res.data.msg);
          search();
        } else {
          ElMessage.error(res.data.msg);
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
}
//跳转新增页面
const onAdd = () => {
  router.push("/Warehouse_InAddView");
};
//详情弹框
const viewDialogVisible = ref(false);
//审核弹框
const reviewDialogVisible = ref(false);
const viewBaseInfo: any = ref({});
const viewDetailList: any = ref([]);

const userName = localStorage.getItem("userName");
defineExpose({ userName });

//导出

// 导出函数（假设已配置 Axios 拦截器自动添加 Token）
async function paload() {
  try {
    // 1. 调用后端导出接口（GET 请求，参数通过 params 传递）
    const response = await StorageRed({
      url: "/api/Warehouse_InOrOut/GetSortShow", // 后端接口地址
      method: "GET",
      params: {
        pageindex: pageQuery.pageindex,
        pagesize: pageQuery.pagesize,
        warehouse_Code: query.value.warehouse_Code,
        warehousing_Type: query.value.warehousing_Type,
        state: query.value.state,
        supplierCode: query.value.supplierCode,
        supplierName: query.value.supplierName,
        createTime: query.value.createTime,
        warehouseType: 1,
      }, // 对应后端 [FromQuery] 的 command 参数
      responseType: "blob", // 关键：指定响应类型为二进制流（Excel 文件）
    });

    // 2. 从响应头获取文件名（后端通过 File 方法设置的 fileName）
    const fileName = getFileNameFromHeaders(response.headers);

    // 3. 生成下载链接并触发下载
    const blob = new Blob([response.data], {
      type:
        response.headers["content-type"] ||
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = fileName; // 文件名从响应头获取或自定义
    document.body.appendChild(a);
    a.click();

    // 4. 清理资源
    window.URL.revokeObjectURL(url);
    document.body.removeChild(a);
  } catch (error: any) {
    // 处理错误（如后端返回 401/400 等）
    console.error("导出失败：", error.response?.data || error.message);
    alert("导出失败，请检查参数或重新登录");
  }
}

// 辅助函数：从响应头提取文件名（后端通过 File 方法设置）
function getFileNameFromHeaders(headers: any) {
  const contentDisposition =
    headers["content-disposition"] || headers["Content-Disposition"];
  if (!contentDisposition) return "入库信息列表.xlsx"; // 默认文件名

  // 解码文件名（处理中文编码问题）
  const match = contentDisposition.match(/filename\*?=([^;]+)/);
  if (match) {
    return decodeURIComponent(match[1].replace(/["']/g, ""));
  }
  return "入库信息列表.xlsx";
}

const onReview = (row: any) => {
  reviewDialogVisible.value = true;
  StorageRed({
    url: "/api/Warehouse_InOrOut/GetWarehouse_InOrOutDetail",
    method: "get",
    params: {
      batch: row.batch,
      warehouseType: 1,
    },
  }).then((res: any) => {
    // 假设返回的是数组
    viewDetailList.value = res.data.data || [];
    viewBaseInfo.value = res.data.data[0] || {};
  });
};

// 审核通过
async function onReviewPass() {
  const ids = viewDetailList.value.map((item: any) => item.id).join(",");
  const state = "通过";
  const reason = viewBaseInfo.value.reason || "";
  const operation_Type = 1;

  try {
    await StorageWrite({
      url: "/api/Warehouse_InOrOut/ExamineWarehouse_InOrOut",
      method: "put",
      params: { ids, state, reason, operation_Type },
    }).then((res: any) => {
      if (res.data.code == 200) {
        ElMessage.success(res.data.msg);
        reviewDialogVisible.value = false;
        search();
      } else {
        ElMessage.error(res.data.msg);
      }
    });
  } catch (e) {
    ElMessage.error("审核失败！");
  }
}

// 审核不通过
async function onReviewFail() {
  const ids = viewDetailList.value.map((item: any) => item.id).join(",");
  const state = "不通过";
  const reason = viewBaseInfo.value.reason || "";
  const operation_Type = 1;

  try {
    await StorageWrite({
      url: "/api/Warehouse_InOrOut/ExamineWarehouse_InOrOut",
      method: "put",
      params: { ids, state, reason, operation_Type },
    }).then((res: any) => {
      if (res.data.code == 200) {
        ElMessage.success(res.data.msg);
        reviewDialogVisible.value = false;
        search();
      } else {
        ElMessage.error(res.data.msg);
      }
    });
  } catch (e) {
    ElMessage.error("操作失败！");
  }
}
</script>

<style scoped>
.in-storage-view {
  padding: 20px;
}
.filter-card {
  margin-bottom: 20px;
  overflow-x: auto;
  white-space: nowrap; /* 防止内容换行 */
}
.table-card {
  margin-top: 10px;
}
.custom-select {
  min-width: 180px;
  /* width: 200px;  // 如需固定宽度可用 */
}
.custom-select >>> .el-input__inner {
  font-weight: bold;
  color: #409eff;
  border-radius: 6px;
  border: 1.5px solid #409eff;
  background: #f8fbff;
  transition: border-color 0.2s;
}
.custom-select >>> .el-input__inner:focus {
  border-color: #66b1ff;
  box-shadow: 0 0 4px #b3d8ff;
}
.custom-select >>> .el-select-dropdown {
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.08);
  border: 1px solid #e6f7ff;
}
.custom-select >>> .el-select-dropdown__item {
  font-size: 15px;
  padding: 8px 18px;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}
.custom-select >>> .el-select-dropdown__item:hover {
  background: #f0faff;
  color: #409eff;
}
.custom-select >>> .el-select-dropdown__item.selected {
  background-color: #e6f7ff !important;
  color: #409eff !important;
  font-weight: bold;
}

.custom-select >>> .el-select-dropdown__item {
  font-size: 15px;
  padding: 8px 18px;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}
.custom-select >>> .el-select-dropdown__item:hover {
  background: #f0faff;
  color: #409eff;
}
.custom-select >>> .el-select-dropdown__item.selected {
  background-color: #e6f7ff !important;
  color: #409eff !important;
  font-weight: bold;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.filter-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.advanced-btn {
  font-size: 14px;
  color: #409eff;
  padding: 0 8px;
  margin-right: 8px;
}
.filter-form {
  display: flex;
  flex-wrap: nowrap; /* 不换行，始终一行显示 */
  align-items: center;
}
.filter-form > * {
  flex-shrink: 0;
}

.filter-form .el-form-item {
  margin-bottom: 0;
  margin-right: 16px;
}
.filter-actions {
  white-space: nowrap;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.filter-actions .el-button:not(:last-child) {
  margin-right: 8px;
}
.filter-input {
  width: 180px;
}
/* @media (max-width: 900px) {
  .filter-form {
    flex-direction: column;
    align-items: flex-start;
  }
  .filter-form .el-form-item {
    margin-bottom: 8px;
  }
  .filter-actions {
    margin-top: 8px;
  }
} */

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.table-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.table-actions .el-button {
  margin-left: 8px;
}
.detail-base-info .el-row {
  row-gap: 12px; /* 行间距 */
}
.detail-base-info .label {
  font-weight: bold;
  color: #333;
  margin-right: 4px;
}
.el-dialog__body {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}
</style>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
